<template>
  <a-card>
    <div>
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="全部"></a-tab-pane>

        <a-tab-pane key="2" tab="待完善资料" force-render></a-tab-pane>

        <a-tab-pane key="3" tab="待入职"></a-tab-pane>

        <a-tab-pane key="4" tab="在职"></a-tab-pane>

        <a-tab-pane key="5" tab="待离职"></a-tab-pane>

        <a-tab-pane key="6" tab="已失效"></a-tab-pane>

        <a-tab-pane key="7" tab="人员异动"></a-tab-pane>
      </a-tabs>

      <a-row v-if="tabCurrentIdx != 7">
        <a-col :span="12">
          <a-input-group :model="iptform" ref="iptform">
            <a-row :gutter="8">
              <a-col :span="8">
                <a-input allow-clear placeholder="企业名称/项目名称" v-model="iptform.corpProNameVal" />
              </a-col>
              <a-col :span="8">
                <a-input allow-clear placeholder="员工姓名/手机号/身份证号" v-model="iptform.staffNameTelIdNumVal" />
              </a-col>
              <a-col :span="8">
                <a-input allow-clear placeholder="类型" v-model="iptform.typeVal" />
              </a-col>
            </a-row>
          </a-input-group>
        </a-col>

        <a-col :span="12" class="pl_50">
          <a-space>
            <a-button type="primary" @click="searchBtnClkFn">查询</a-button>
            <a-button @click="resetBtnClkFn">重置</a-button>
          </a-space>
        </a-col>

        <a-col :span="24" class="mtb_10">
          <a-button type="primary" v-show="tabCurrentIdx > 1">{{btnName}}</a-button>
        </a-col>
      </a-row>

      <a-row v-else>
        <a-col :span="12">
          <a-input-group :model="lastIptform" ref="lastIptform">
            <a-row :gutter="8">
              <a-col :span="8">
                <a-input allow-clear placeholder="姓名/身份证号" v-model="lastIptform.staffNameIdNumVal" />
              </a-col>
              <a-col :span="8">
                <a-select show-search placeholder="类型" option-filter-prop="children" style="width: 219px" :filter-option="filterOption" @focus="handleFocus" @blur="handleBlur" @change="handleChange">
                  <a-select-option value="jack">
                    Jack
                  </a-select-option>
                  <a-select-option value="lucy">
                    Lucy
                  </a-select-option>
                  <a-select-option value="tom">
                    Tom
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="8">
                <a-select show-search placeholder="项目" option-filter-prop="children" style="width: 219px" :filter-option="filterOption" @focus="handleFocus" @blur="handleBlur" @change="handleChange">
                  <a-select-option value="jack">
                    Jack
                  </a-select-option>
                  <a-select-option value="lucy">
                    Lucy
                  </a-select-option>
                  <a-select-option value="tom">
                    Tom
                  </a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-input-group>
        </a-col>
        <a-col :span="12" style="padding-left: 10px;">
          <a-col :span="10">
            <a-date-picker @change="onChange" />
          </a-col>
          <a-col :span="12">
            <a-space>
              <a-button type="primary" @click="searchBtnClkFn">查询</a-button>
              <a-button @click="resetBtnClkFn">重置</a-button>
            </a-space>
          </a-col>
        </a-col>

        <a-col :span="12" class="mtb_10">
          <a-button type="primary">导出</a-button>
        </a-col>
      </a-row>

      <a-table :columns="tableColumns" :data-source="tableData" rowKey="id" :row-selection="rowSelection" v-if="tabCurrentIdx != 7">
        <span slot="setting">
          <a>入职</a>
          <a-divider type="vertical" />
          <a>编辑</a>
          <a-divider type="vertical" />
          <a>离职</a>
          <a-divider type="vertical" />
          <a>取消入职</a>
          <a-divider type="vertical" />
          <a>批量离职</a>
          <a-divider type="vertical" />
          <a @click="goDetails">详情</a>
        </span>
      </a-table>

      <!-- 人员异动table -->
      <a-table :columns="lastTableColumns" :data-source="lastTableData" rowKey="id" :row-selection="rowSelection1" v-else>
        <span slot="setting">
          <a-space>
            <a-button size="small">取消入职</a-button>
            <a-button type="primary" size="small">再次入职</a-button>
          </a-space>
        </span>
      </a-table>
    </div>
  </a-card>
</template>

<script>
const tableColumns = [
  {
    title: "姓名", // 表头标题
    dataIndex: "name", // dataIndex 对应属性值
    key: "name",
  },
  {
    title: "项目名称",
    dataIndex: "proName",
    key: "proName",
  },
  {
    title: "身份证号",
    dataIndex: "IdNum",
    key: "IdNum",
  },
  {
    title: "手机号",
    dataIndex: "telNum",
    key: "telNum",
  },
  {
    title: "创建时间",
    dataIndex: "createdDate",
    key: "createdDate",
  },
  {
    title: "入职时间",
    dataIndex: "entryDate",
    key: "entryDate",
  },
  {
    title: "更新时间",
    dataIndex: "updateDate",
    key: "updateDate",
  },
  {
    title: "操作",
    key: "setting",
    scopedSlots: { customRender: "setting" },
  },
];

const lastTableColumns = [
  {
    title: "类型",
    dataIndex: "type",
    key: "type",
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "项目",
    dataIndex: "proName",
    key: "proName",
  },
  {
    title: "身份证号",
    dataIndex: "IdNum",
    key: "IdNum",
  },
  {
    title: "手机号",
    dataIndex: "telNum",
    key: "telNum",
  },
  {
    title: "提交日期",
    dataIndex: "submitDate",
    key: "submitDate",
  },
  {
    title: "操作",
    key: "setting",
    scopedSlots: { customRender: "setting" },
  }
]

const tableData = [
  {
    id: 1,
    name: "张三",
    proName: "测试项目名称",
    IdNum: "43094419952026325",
    telNum: "18848960162",
    createdDate: "2021-04-10 14:30",
    entryDate: "2020-04-15",
    updateDate: "2021-04-10 14:30",
  },
  {
    id: 2,
    name: "张四",
    proName: "测试项目名称",
    IdNum: "43094419952026325",
    telNum: "18848960162",
    createdDate: "2021-04-10 14:30",
    entryDate: "2020-04-15",
    updateDate: "2021-04-10 14:30",
  },
];

const lastTableData = [
  {
    id: 1,
    type: '拒签',
    name: "张四",
    proName: "测试项目名称",
    IdNum: "43094419952026325",
    telNum: "18848960162",
    submitDate: '2021-04-10 16:56',
  },
  {
    id: 2,
    type: '拒签',
    name: "张四",
    proName: "测试项目名称",
    IdNum: "43094419952026325",
    telNum: "18848960162",
    submitDate: '2021-04-10 16:56',
  }
]

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

const rowSelection1 = {
  onChange1: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};


export default {
  name: "employeeManagement",
  data () {
    return {
      title: "提交失败",
      description: "请核对并修改以下信息后，再重新提交。",
      tableData,
      lastTableData,
      tableColumns,
      lastTableColumns,
      rowSelection,
      rowSelection1,
      tabCurrentIdx: 1,
      btnName: '',
      iptform: {
        corpProNameVal: '',
        staffNameTelIdNumVal: '',
        typeVal: ''
      },
      lastIptform: {
        corpProNameVal: '',
        staffNameTelIdNumVal: '',
        typeVal: ''
      }

    };
  },
  methods: {
    callback (key) {
      this.tabCurrentIdx = key;
      if (key == 2) {
        this.btnName = '批量导入'
      } else if (key == 3) {
        this.btnName = '批量入职'
      } else {
        this.btnName = '导出'
      }

      if (key > 3) {
        this.rowSelection = null
      } else {
        this.rowSelection = rowSelection
      }
    },

    searchBtnClkFn () {
      console.log(this.iptform.corpProNameVal, this.iptform.staffNameTelIdNumVal, this.iptform.typeVal)
    },

    resetBtnClkFn () {
      this.iptform = {}
    },

    goDetails () {
      this.$router.push('/quickEntry/employeeManagement/employeeDetails')
    },

    // 下拉带搜索框
    handleChange (value) {
      console.log(`selected ${value}`);
    },
    handleBlur () {
      console.log('blur');
    },
    handleFocus () {
      console.log('focus');
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style scoped lang="less">
.mtb_10 {
  margin: 10px 0;
}
.pl_50 {
  padding-left: 50px;
}
</style>
